﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BookEntry.aspx.cs" Inherits="CooliteExamples.Web.Pages.BookEntry" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
		<title></title>
</head>
<body>
		<ext:ScriptManager runat="server" />

		<script type="text/javascript" language="javascript">
				var btnOpenAuthorAdd_Click = function(sender, args) {
						AddAuthorStore.load();
						AddAuthorWindow.show();
				}

				var AddAuthorWindow_Show = function(sender, args) {
						txtNewAuthorName.setValue("");
						cmbAuthor.clearValue();
				}
		</script>

		<form id="form1" runat="server">
		<ext:Store ID="BookStore" runat="server" AutoLoad="true" AutoDataBind="false">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="BookId" />
										<ext:RecordField Name="Title" />
										<ext:RecordField Name="ISBN" />
										<ext:RecordField Name="CategoryId" />
										<ext:RecordField Name="CategoryName" />
								</Fields>
						</ext:JsonReader>
				</Reader>
		</ext:Store>
		<ext:Store ID="AuthorStore" runat="server" AutoLoad="false" AutoDataBind="false">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="AuthorId" />
										<ext:RecordField Name="AuthorName" />
								</Fields>
						</ext:JsonReader>
				</Reader>
		</ext:Store>
		<ext:Store ID="CategoryStore" runat="server" AutoLoad="true" AutoDataBind="false">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="CategoryId" />
										<ext:RecordField Name="Name" />
								</Fields>
						</ext:JsonReader>
				</Reader>
		</ext:Store>
		<ext:Store ID="AddAuthorStore" runat="server" AutoLoad="false" AutoDataBind="true">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="AuthorId" />
										<ext:RecordField Name="AuthorName" />
								</Fields>
						</ext:JsonReader>
				</Reader>
		</ext:Store>
		<ext:Panel ID="pnlMain" runat="server" Border="false" AutoHeight="true">
				<Body>
						<ext:GridPanel ID="gpBooks" runat="server" Height="500" StoreID="BookStore" StripeRows="true"
								Title="Book List" AutoScroll="true">
								<ColumnModel ID="ColumnModel1" runat="server">
										<Columns>
												<ext:Column Header="ID" DataIndex="BookId" Width="40" />
												<ext:Column Header="ISBN" DataIndex="ISBN" Width="90" />
												<ext:Column Header="Title" DataIndex="Title" Width="230" />
												<ext:Column Header="Category" DataIndex="CategoryName" Width="60" />
												<ext:CommandColumn Width="50">
														<Commands>
																<ext:GridCommand Icon="ApplicationFormEdit" CommandName="Edit" />
																<ext:CommandSeparator />
																<ext:GridCommand Icon="Delete" CommandName="Delete" />
														</Commands>
												</ext:CommandColumn>
										</Columns>
								</ColumnModel>
								<LoadMask Msg="Loading..." />
								<AjaxEvents>
										<Command OnEvent="gpBooks_Command" Method="POST" Type="Submit" />
								</AjaxEvents>
								<View>
										<ext:GridView runat="server" ForceFit="true" />
								</View>
						</ext:GridPanel>
				</Body>
				<Buttons>
						<ext:Button ID="btnAdd" runat="server" Icon="Add" Text="Add">
								<AjaxEvents>
										<Click OnEvent="btnAdd_Click" Type="Submit" Method="POST" />
								</AjaxEvents>
						</ext:Button>
				</Buttons>
		</ext:Panel>
		<!-- Modify Window -->
		<ext:Window ID="BookModifyWindow" runat="server" AutoHeight="true" Width="560" Title="Add Book"
				ButtonAlign="Right" CenterOnLoad="true" Modal="true" Icon="ApplicationEdit" ShowOnLoad="false">
				<Body>
						<ext:FormPanel ID="fpBook" runat="server" AutoHeight="true" BodyStyle="padding: 4px;"
								Method="POST">
								<Body>
										<ext:FormLayout runat="server">
												<ext:Anchor>
														<ext:Panel ID="pnl" runat="server" AutoHeight="true" Border="false">
																<Body>
																		<ext:ColumnLayout runat="server">
																				<ext:LayoutColumn ColumnWidth=".48">
																						<ext:Panel ID="pnlColumn1" runat="server" Border="false" AutoHeight="true">
																								<Body>
																										<ext:FormLayout runat="server" LabelAlign="Left" LabelWidth="70">
																												<ext:Anchor>
																														<ext:TextField ID="txtTitle" runat="server" Width="170" FieldLabel="Title" />
																												</ext:Anchor>
																												<ext:Anchor>
																														<ext:ComboBox ID="cmbCategory" runat="server" Width="170" FieldLabel="Category" Mode="Local"
																																DisplayField="Name" ValueField="CategoryId" ForceSelection="true" StoreID="CategoryStore" />
																												</ext:Anchor>
																										</ext:FormLayout>
																								</Body>
																						</ext:Panel>
																				</ext:LayoutColumn>
																				<ext:LayoutColumn ColumnWidth=".48">
																						<ext:Panel ID="pnl1" runat="server" AutoHeight="true" Border="false">
																								<Body>
																										<ext:FormLayout ID="FormLayout1" runat="server" LabelAlign="Left" LabelWidth="70">
																												<ext:Anchor>
																														<ext:TextField ID="txtISBN" runat="server" Width="170" FieldLabel="ISBN" />
																												</ext:Anchor>
																										</ext:FormLayout>
																								</Body>
																						</ext:Panel>
																				</ext:LayoutColumn>
																		</ext:ColumnLayout>
																</Body>
														</ext:Panel>
												</ext:Anchor>
												<ext:Anchor>
														<ext:GridPanel ID="gpAuthors" runat="server" StripeRows="true" Height="200" Title="Authors"
																AutoScroll="true" StoreID="AuthorStore">
																<ColumnModel runat="server">
																		<Columns>
																				<ext:Column Header="ID" DataIndex="AuthorId" Width="50" />
																				<ext:Column Header="Name" DataIndex="AuthorName" />
																				<ext:CommandColumn Width="50">
																						<Commands>
																								<ext:GridCommand Icon="Delete" CommandName="Remove" />
																						</Commands>
																				</ext:CommandColumn>
																		</Columns>
																</ColumnModel>
																<AjaxEvents>
																		<Command OnEvent="gpAuthors_Command" Method="POST" Type="Submit" />
																</AjaxEvents>
																<View>
																		<ext:GridView runat="server" ForceFit="true" />
																</View>
														</ext:GridPanel>
												</ext:Anchor>
										</ext:FormLayout>
								</Body>
						</ext:FormPanel>
				</Body>
				<Buttons>
						<ext:Button ID="btnCancel" runat="server" Icon="Cancel" Text="Cancel">
								<Listeners>
										<Click Handler="BookModifyWindow.hide();" />
								</Listeners>
						</ext:Button>
						<ext:Button ID="btnOpenAuthorAdd" runat="server" Icon="Add" Text="Add Author">
								<Listeners>
										<Click Fn="btnOpenAuthorAdd_Click" />
								</Listeners>
						</ext:Button>
						<ext:Button ID="btnSave" runat="server" Icon="Accept" Text="Save">
								<AjaxEvents>
										<Click OnEvent="btnSave_Click" Method="POST" Type="Submit" />
								</AjaxEvents>
						</ext:Button>
				</Buttons>
		</ext:Window>
		<!-- Author Add Window -->
		<ext:Window ID="AddAuthorWindow" runat="server" Title="Add Author to Book" AutoHeight="true"
				ButtonAlign="Right" CenterOnLoad="true" Modal="true" Width="470" ShowOnLoad="false">
				<Body>
						<ext:FormPanel ID="fpAddAuthor" runat="server" AutoHeight="true" BodyStyle="padding: 4px;"
								Method="POST">
								<Body>
										<ext:ColumnLayout runat="server">
												<ext:LayoutColumn ColumnWidth=".48">
														<ext:Panel ID="pnlCol1" runat="server" AutoHeight="true" Border="false">
																<Body>
																		<ext:FormLayout runat="server" LabelAlign="Top">
																				<ext:Anchor>
																						<ext:TextField ID="txtNewAuthorName" runat="server" Width="170" FieldLabel="New Author" />
																				</ext:Anchor>
																		</ext:FormLayout>
																</Body>
														</ext:Panel>
												</ext:LayoutColumn>
												<ext:LayoutColumn ColumnWidth=".48">
														<ext:Panel ID="pnlCol2" runat="server" AutoHeight="true" Border="false">
																<Body>
																		<ext:FormLayout runat="server" LabelAlign="Top">
																				<ext:Anchor>
																						<ext:ComboBox ID="cmbAuthor" runat="server" ForceSelection="true" DisplayField="AuthorName"
																								ValueField="AuthorId" StoreID="AddAuthorStore" FieldLabel="From Existing" Mode="Local">
																						</ext:ComboBox>
																				</ext:Anchor>
																		</ext:FormLayout>
																</Body>
														</ext:Panel>
												</ext:LayoutColumn>
										</ext:ColumnLayout>
								</Body>
						</ext:FormPanel>
				</Body>
				<Buttons>
						<ext:Button ID="btnAddAuthorCancel" runat="server" Icon="Cancel" Text="Cancel">
								<Listeners>
										<Click Handler="AddAuthorWindow.hide();" />
								</Listeners>
						</ext:Button>
						<ext:Button ID="btnAddAuthor" runat="server" Icon="Add" Text="Add">
								<AjaxEvents>
										<Click OnEvent="btnAddAuthor_Click" Method="POST" Type="Submit" />
								</AjaxEvents>
						</ext:Button>
				</Buttons>
				<Listeners>
						<Show Fn="AddAuthorWindow_Show" />
				</Listeners>
		</ext:Window>
		<!-- Delete Book Confirm Window -->
		<ext:Window ID="DeleteBookConfirmWindow" runat="server" AutoHeight="true" BodyStyle="padding: 4px;"
				ButtonAlign="Center" CenterOnLoad="true" Modal="true" ShowOnLoad="false" Title="Confirm Book Delete"
				Icon="Error" Width="350">
				<Body>
						<ext:Panel ID="pnlMainBody" runat="server" Border="false" AutoHeight="true" Frame="true">
								<Body>
										<ext:CenterLayout runat="server">
												<ext:Panel runat="server" Border="false" AutoHeight="true" StyleSpec="margin-top: 10px; margin-bottom: 10px;">
														<Body>
																<ext:Label runat="server" Html="<h2>Are you sure you want to delete this book?</h2>" />
														</Body>
												</ext:Panel>
										</ext:CenterLayout>
								</Body>
						</ext:Panel>
				</Body>
				<Buttons>
						<ext:Button ID="btnConfirmCancel" runat="server" Icon="Cancel" Text="Cancel">
								<Listeners>
										<Click Handler="DeleteBookConfirmWindow.hide();" />
								</Listeners>
						</ext:Button>
						<ext:Button ID="btnConfirmConfirm" runat="server" Icon="Accept" Text="Confirm">
								<AjaxEvents>
										<Click OnEvent="btnConfirmConfirm_Click" Method="POST" Type="Submit" />
								</AjaxEvents>
						</ext:Button>
				</Buttons>
		</ext:Window>
		</form>
</body>
</html>
